<html>
    <head>
        <meta charset="utf-8" />
        <title>规格编辑</title>
        <link rel="stylesheet" href="./components/select/select.css" >
        <link rel="stylesheet" href="./components/input/input.css" >
        <link rel="stylesheet" href="./components/table/table.css" >
        <style>
            *{
                margin:0px;padding:0px;
            }

            select {
                /*将默认的select选择框样式清除*/
                appearance: none;
                -moz-appearance: none;
                -webkit-appearance: none;
            }
            /*IE浏览器隐藏下拉箭头*/
            select::-ms-expand {
                display: none;
            }

            .remove{
                color:rgb(45,140,240);
                margin-left:15px;
                line-height:40px;
                font-size:12px;
                cursor:pointer;
            }
            .zhushi{
                color:red;
                margin-left:15px;
                line-height:40px;
                font-size:12px;
                cursor:pointer;
            }

            #app .app-title{
                margin:10px auto;
                height:30px;
                line-height:30px;
                width:120px;
                text-align:center;
                font-size:16px;
                font-weight:bold;
            }
            #app .container{
                width:900px;
                margin:0 auto;
                margin-top:10px;
            }
            .container .form-item{
                display:flex;
                margin-bottom:12px;
            }
            .container .form-item .left{
                width:70px;
                line-height:30px;
                height:30px;
                font-size:12px;
                color:#333333;
                font-weight:bold;
                flex-shrink: 0;
            }
            .container .form-item .right{
                flex-grow:1 ;
            }
            .container .form-item .btns{
                height:25px;
                display:flex;
            }
            .container .form-item .btns .btn{
                height:100%;
                line-height:25px;
                font-size:12px;
                color:grey;
                border-radius:5px;
                cursor:pointer;
            }
            .container .form-item .btns .btn:hover{
                border-color:grey;
            }
            .guige-add{
                border:1px dashed #dcdcdc;
                padding:0 23px;
            }
            .guige-named{
                border:1px solid #ececec;
                margin-left:10px;
                padding:0 12px;
            }

            .form-item .right .guige-table{
                border:1px solid  #ececec ;
            }
            .form-item .right .guige-table .guige-table-top{
                background:rgb(247,247,247);
                height:40px;
                border-bottom:1px solid #ececec;
                display:flex;
                align-items:center;
            }
            .form-item .right .guige-table .guige-table-top .title{
                height:40px;
                line-height:40px;
                color:rgb(81 , 90 , 110) ;
                font-size:12px;
                margin-left:18px;
                width:65px;
                text-align:right;
            }
            .form-item .right .guige-table .guige-table-top .select{
                border:1px solid #ececec;
                width:120px;
                border-radius:5px;
                height:30px;
            }
            .form-item .right .guige-table .guige-table-content{
                display:flex;
                flex-wrap: wrap;
            }
            .form-item .right .guige-table .guige-table-content .title{
                height:40px;
                line-height:40px;
                color:rgb(81 , 90 , 110) ;
                font-size:12px;
                margin-left:18px;
                width:65px;
                text-align:right;
            }
            .form-item .right .guige-table .guige-table-content .item{
                display:flex;
                align-items:center;
            }
            .form-item .right .guige-table .guige-table-content .item .del-icon{
                width:14px;
                height:14px;
                margin-left:10px;
                cursor:pointer;
            }
            .form-item .right .guige-table .guige-table-content .item .del-icon img{
                width:100%;
                height:100%;
            }
            .form-item .right .guige-table .guige-table-content .item .input{
                width:100px;
                height:30px;
                border-radius:5px;
                border:1px solid #ececec;
                padding:0 10px;
            }

        </style>
    </head>
    <body>
        <div id="app">
            <!-- <div class="app-title">
                添加商品规格
            </div> -->
            <div class="container">
<!--                <div class="form-item">-->
<!--                    <div class="left">商品规格：</div>-->
<!--                    <div class="right btns">-->
<!--&lt;!&ndash;                        <div @click="add_guige" class="btn guige-add">&ndash;&gt;-->
<!--&lt;!&ndash;                            <span style="font-weight:bold;font-size:13px;">+</span>&nbsp;&nbsp;添加规格&ndash;&gt;-->
<!--&lt;!&ndash;                        </div>&ndash;&gt;-->
<!--&lt;!&ndash;                        <div @click="add_default_guige" class="btn guige-named">&ndash;&gt;-->
<!--&lt;!&ndash;                            自定义规格名&ndash;&gt;-->
<!--&lt;!&ndash;                        </div>&ndash;&gt;-->
<!--                    </div>-->
<!--                </div>-->

                <div v-for="(item , index) in select_guiges" class="form-item">
                    <div class="left"></div>
                    <div class="right">
                        <div class="guige-table">
                            <div class="guige-table-top">
                                <div class="title">
                                    规格名称：
                                </div>
                                <div class="select">
                                    <my-select :name="item.name" :data-list="default_guiges" label-property="name" @change="selected($event , index)"></my-select>
                                </div>
                            </div>
                            <div class="guige-table-content">
                                <div v-for="(value , idx) in item.values" class="item">
                                    <div class="title">
                                        规格值：
                                    </div>
                                    <div class="input">
                                        <my-input @change="change_value($event , index , idx)" :value="value.value"></my-input>
                                    </div>
                                    <div @click="remove_guige_value(index,idx)" class="del-icon">
                                        <img src="./img/del.png" />
                                    </div>
                                </div>
                                <div @click="add_guige_value(index)" class="remove">
                                    添加规格值
                                </div>
                                <div class="zhushi">（注：规格值不能出现 =、& 、# 符号）</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-item">
                    <div class="left">规格详情：</div>
                    <div class="right">
                        <my-table :names="names" :values="values"></my-table>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="./js/jquery.js"></script>
    <script src="./js/layer.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./components/select/select.js"></script>
    <script src="./components/input/input.js"></script>
    <script src="./components/table/table.js"></script>
    <script>

        function getQueryVariable(variable)
        {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }
        var uid = getQueryVariable("uid");

        // //url 传参
        // function GetQueryString(name){
        //     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        //     var a = decodeURI(window.location.search);
        //     var r = a.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
        //     if(r!=null)return  unescape(r[2]); return null;
        // }
        // var uid = GetQueryString("uid");

        $.ajax({
            url:'/guige/addDefaultGuige',
            sync:false,
            success:function (result) {
                if (result.code==200){
                    console.log("容量添加");
                }
            }
        })

        var app = new Vue({
            el:"#app" ,
            data(){
                return{
                    default_guiges:[
                        {name:"容量" , gid:1} ,
                    ] ,
                    select_guiges:[
                        {values:[{value:""}] , name:"容量"} ,
                    ] ,
                    values:[]
                }
            } ,
            watch:{
                values:{
                    handler:function(n , o) {
                        this.setStorage()
                    },
                    deep:true
                }
            } ,
            created:function(){
                this.values = this.values_comput()
                this.getStorage() ;
            } ,
            methods:{
                selected(res , index){
                    this.select_guiges[index].name = res.value.name
                    this.setStorage()
                } ,
                add_guige(){
                    if(this.select_guiges.length == 3) {
                        layer.msg("规格数量不能超过三个")
                        return
                    }
                    this.select_guiges.push({values:[] , name:"容量"})
                    this.values = this.values_comput()
                    this.setStorage()
                } ,
                remove_guige(idx) {
                    this.select_guiges.splice(idx , 1)
                    this.values = this.values_comput()
                    this.setStorage()
                } ,
                remove_guige_value(index , idx){
                    this.select_guiges[index].values.splice(idx , 1)
                    this.values = this.values_comput()
                    this.setStorage()
                } ,
                add_guige_value(index){
                    this.select_guiges[index].values.push({value:""})
                    this.values = this.values_comput()
                    this.setStorage()
                } ,
                change_value(res , index , idx){
                    this.select_guiges[index].values[idx].value = res.value
                    this.values = this.values_comput()
                    this.setStorage()
                } ,
                setStorage:function(){
                    var names = []
                    for(var i in this.select_guiges) {
                        names.push(this.select_guiges[i].name)
                    }
                    window.localStorage.guige = JSON.stringify({names:names , values:this.values , default_guiges:this.default_guiges , select_guiges:this.select_guiges})
                } ,
                getStorage:function(){
                    var data = JSON.parse(window.localStorage.guige)
                    if(data == null) {
                        return
                    }
                    if(data.default_guiges != null) {
                        this.default_guiges = data.default_guiges
                    }
                    if(data.values != null) {
                        this.values = data.values
                    }
                    if(data.select_guiges != null) {
                        this.select_guiges = data.select_guiges
                    }
                } ,
                add_default_guige(){
                    var self = this 
                    layer.open({
                        content:"<input id='value' style='border:1px solid #ececec;outline:none;width:150px;height:30px;padding-left:5px;' placeholder='请输入规格名称' />" ,
                        yes:function(res){
                            var value = $("#value").val()
                            var flag = true 
                            for(var i in self.default_guiges) {
                                if(self.default_guiges[i] == value) {
                                    layer.msg("规格已经存在",{icon:2,time:1500});
                                    flag = false ;
                                }
                            }
                            if(flag) {
                                $.ajax({
                                    url:"/guige/add_guige",
                                    data:{uid:uid , name:value,type:0},
                                    success:function(res){
                                        if(res.code == 200) {
                                            self.default_guiges.push({name:value , gid:1});
                                            layer.msg("添加成功");
                                        }else{
                                            layer.msg(res.msg)
                                        }
                                    } ,
                                    fail:function(err) {
                                        layer.msg("网络异常")
                                    }
                                })
                            }
                            layer.close(res)
                        } 
                    })
                } ,
                walkinto(arr , idx){
                    if(idx > this.select_guiges.length - 1) {
                        return
                    }
                    if(this.select_guiges[idx].values.length == 0) {
                        var tmp = []
                        arr.push({"name":"" , jiage:"" , kucun:"" , img:"" , children:tmp})
                        this.walkinto(tmp , idx+1)
                    }else{
                        for(var i in this.select_guiges[idx].values) {
                            var tmp = []
                            arr.push({"name":this.select_guiges[idx].values[i].value , jiage:"" , kucun:"" , img:"" , children:tmp})
                            this.walkinto(tmp , idx+1)
                            // tmp.splice(tmp.length - 1 , 1)
                        }
                    }
                } ,
                values_comput(){
                    var old = this.values 
                    var values = []
                    this.walkinto(values , 0)
                    if(values.length != 0 && old.length != 0) {
                        for(var i in old) {
                            for(var j in values) {
                                if(values[j].name == old[i].name) {
                                    values[j].img = old[i].img
                                }
                            }
                        }
                    }
                    switch(this.select_guiges.length) {
                        case 1:
                            for(var i in old) {
                                for(var j in values) {
                                    if(old[i].name == values[j].name) {
                                        values[j].jiage = old[i].jiage
                                        values[j].kucun = old[i].kucun
                                    }
                                }
                            }
                            break
                        case 2:
                            for(var i in old) {
                                for(var j in values) {
                                    if(old[i].name == values[j].name) {
                                        for(var m in old[i].children) {
                                            for(var n in values[j].children) {
                                                if(old[i].children[m].name == values[j].children[n].name) {
                                                    values[j].children[n].jiage = old[i].children[m].jiage
                                                    values[j].children[n].kucun = old[i].children[m].kucun
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            break
                        case 3:
                            for(var i in old) {
                                for(var j in values) {
                                    if(old[i].name == values[j].name) {
                                        for(var m in old[i].children) {
                                            for(var n in values[j].children) {
                                                if(old[i].children[m].name == values[j].children[n].name) {
                                                    for(var a in old[i].children[m].children) {
                                                        for(var b in values[j].children[n].children) {
                                                            if(old[i].children[m].children[a].name == values[j].children[n].children[b].name) {
                                                                values[j].children[n].children[b].jiage = old[i].children[m].children[a].jiage
                                                                values[j].children[n].children[b].kucun = old[i].children[m].children[a].kucun
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            break
                    }
                    // if(values.length != 0 && old.length != 0 && values[0].data.length == old[0].data.length) {
                    //     for(var i in values) {
                    //         for(var j in old) {
                    //             var flag = true
                    //             for(var m in values[i].data) {
                    //                 if(values[i].data[m] != old[j].data[m]) {
                    //                     flag = false
                    //                 }
                    //             }
                    //             if(flag) {
                    //                 values[i] = old[j]
                    //             }
                    //         }
                    //     }
                    // }
                    return values 
                } 
            } ,
            computed:{
                names(){
                    var names = []
                    for(var i in this.select_guiges) {
                        names.push(this.select_guiges[i].name)
                    }
                    return names 
                } 
            }
        })
    </script>
</html>